import React, { useState } from 'react'
import Header from '../../components/Header'
import FooterBar from '../../components/FooterBar'
import hangIcon from '../../assets/image/牛肉面.png'
import './index.css'
import { NoticeBar } from 'antd-mobile';
import { EnvironmentOutline, AaOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom';




export default function Cate() {
  const [list, setList] = useState([1, 2, 4]);
  const history = useNavigate();

  const jumpPage = () => {
    history('/freeFood')
  };

  const renderCate = () => {
    return (
      <div>
        <div className='cate_bg_img'>
          <NoticeBar content={'请选择下面食物盲盒，杜绝浪费行为哟'} color='alert' />
          <div className='cate_bg_time'>
            <h1>MonDay</h1>
            <h2>2024年5月20日</h2>
          </div>
        </div>
        {/* <div className='cate_icons_boxs'>
          <div className='iconDiv'>
            <div>
              <img src={qunIcon} alt="" className='icon' />
            </div>
            <div>
              福利群
            </div>
          </div>
          <div className='iconDiv'>
            <div>
              <img src={liwuIcon} alt="" className='icon' />
            </div>
            <div>
              礼物
            </div>
          </div>
        </div> */}

        <div className='cate_banner_tittle'>
          <h4 className='before_tittle'>惊喜食物盲盒</h4>
        </div>
        <div className='cate_banner'>
          {
            list.map((item) => {
              return (
                <div className='cate_hang' onClick={() => jumpPage()}>
                  <div className='cate_hang_start'>
                    <img src={hangIcon} alt="" />
                    <div className='cate_hang_mess'>
                      <h3 className='cate_hang_tittle'>
                        牛肉面
                      </h3>
                      <div className='cate_hang_fant cate_hang_name'>
                        <EnvironmentOutline />王老五店
                      </div>
                      <div className='cate_hang_fant cate_hang_num'>
                        <AaOutline />还剩下8份
                      </div>
                    </div>
                  </div>
                  <div className='cate_hang_end'>
                    <div className='cate_hang_price'>
                      30元
                    </div>
                    <div className='cate_hang_before'>
                      40-50元
                    </div>
                  </div>
                  <div className='ribbon' >
                    <span>
                      畅销
                    </span>
                  </div>
                </div>
              )
            })
          }
        </div>
      </div>
    )
  }


  return (
    <div>
      <Header />
      {renderCate()}
      <FooterBar />
    </div>
  )
}
